import React,{Component} from 'react';
import { 
	StyleSheet, 
	View, 
	ScrollView,
	Text, 
	Button,
	Image,
	TextInput,
	StatusBar,
	KeyboardAvoidingView,
	TouchableWithoutFeedback,
} from 'react-native';
import Header from './header/Header';
export default class Register extends Component {
	constructor(props) {
        super(props);
        this.state = {
        	text: '',
            hasSend: false,
            time: 10,
        };
        this._getText = this._getText.bind(this);
    }

    _getText(e){
    	if(e != ''){
    		var text = e;
	    	let mobile = /\d+/g;
	    	console.log(text.match(mobile).join(''))
	    	this.setState({
	    		text: text.match(mobile).join(''),
	    	});
    	}else {
    		this.setState({
	    		text: '',
	    	});
    	}
    }

    _countDown(){
    	var _this = this;
    	_this.setState({
    		hasSend: true
    	});
    	setTimeout(function(){
    		if(_this.state.time > 0){
	    		_this.setState({
		    		time: _this.state.time - 1
		    	},function(){
		    		_this._countDown()
		    	});
	    	}else {
	    		_this.setState({
		    		time: 10,
		    		hasSend: false
		    	});
	    	}
    	},1000);
    }

	render() {
        const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        let barHeight = StatusBar.currentHeight;
        return (
        	<View style={{
        		flex: 1,
        		// paddingTop: barHeight, 
        		backgroundColor: '#fff'
        	}}>
        		<Header 
        			title='注册' 
	        		isShowBack={true}
	        		goBack={goBack}
        		/>

    			<View style={{marginTop: 50, alignItems: 'center'}}>
    				<View style={{width: '73.333333%',paddingBottom: 10, marginBottom: 20, borderBottomWidth: 1, borderColor: '#ebebeb', flexDirection: 'row', alignItems: 'center'}}>
						<Text style={{width: 50, fontSize: 14, color: '#747474', textAlign: 'center'}}>+86</Text>
						<View style={{width: 1, height: 18, backgroundColor: '#0000ff'}}></View>
						<TextInput
			                style={{
			                	flex: 1,
			                    height: 19,
			                    padding: 0,
			                    paddingLeft: 8,
			                    fontSize: 14,
			                    borderRadius: 5,
			                }}
			                // defaultValue={'我是帅帅'} // 文本默认值
			                // 获取用户输入的值
			                // onChange = {(event)=>this._getText(event.nativeEvent.text)}
			                onChangeText = {(text)=>this._getText(text)}
			                maxLength = {11}
			                value={this.state.text}
			                keyboardType='numeric'
			                placeholder={'请输入手机号'}
			                placeholderTextColor='#747474'
			                underlineColorAndroid={'transparent'}
			            />
    				</View>
    				<View style={{width: '73.333333%',paddingBottom: 10, marginBottom: 20, borderBottomWidth: 1, borderColor: '#ebebeb', flexDirection: 'row', alignItems: 'center'}}>
						<View style={{width: 50, justifyContent: 'center', alignItems: 'center'}}>
							<Image 
				            	style={{width: 20, height: 10}}
				            	// resizeMode='contain'
				            	source={require('../images/eyes.png')}
				            />
						</View>
						<View style={{width: 1, height: 18, backgroundColor: '#0000ff'}}></View>
						<TextInput
			                style={{
			                	flex: 1,
			                    height: 19,
			                    padding: 0,
			                    paddingLeft: 8,
			                    fontSize: 14,
			                    borderRadius: 5,
			                }}
			                secureTextEntry={true}
			                placeholder={'请输入密码'}
			                placeholderTextColor='#747474'
			                underlineColorAndroid={'transparent'}
			            />
    				</View>
    				<View style={{width: '73.333333%',paddingBottom: 10, borderBottomWidth: 1, borderColor: '#ebebeb', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
						<TextInput
			                style={{
			                	flex: 1,
			                    height: 19,
			                    padding: 0,
			                    paddingLeft: 8,
			                    fontSize: 14,
			                    borderRadius: 5,
			                }}
			                placeholder={'填写验证码'}
			                keyboardType='numeric'
			                placeholderTextColor='#747474'
			                underlineColorAndroid={'transparent'}
			            />
			            <View style={{height: 19, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
			            	{this.state.hasSend?
			            		(<Text style={styles.codeBox}>{this.state.time + 's'}</Text>)
			            		:
			            		(<TouchableWithoutFeedback onPress={this._countDown.bind(this)}>
				            		<View>
				            			<Text style={styles.codeBox}>发送验证码</Text>
				            		</View>
				            	</TouchableWithoutFeedback>)
			            	}
			            </View>
    				</View>

    				<TouchableWithoutFeedback onPress={()=>alert('手机号：'+this.state.text)}>
	    				<View style={{
	    					width: 187,height: 42,borderRadius: 20,backgroundColor: '#fff',justifyContent: 'center', alignItems: 'center',marginTop: 24,
	    					shadowOffset: {width: 0, height: 5},  
					        shadowOpacity: 0.5,  
					        shadowRadius: 8,  
					        shadowColor: '#ebebeb',  
					        //注意：这一句是可以让安卓拥有灰色阴影  
					        elevation: 4, 
	    				}}>
	    					<Text style={{fontSize: 16, color: '#0000ff', textAlign: 'center'}}>注册</Text>
	    				</View>
    				</TouchableWithoutFeedback>
		        </View>

	        	<Image 
	            	style={{width: '100%', height: 115,position: 'absolute', left: 0, right: 0, bottom: 0}}
	            	// resizeMode='contain'
	            	source={require('../images/loginBg.png')}
	            />

				<TouchableWithoutFeedback onPress={()=>alert('微信登录')}>
		            <View style={{width: 80,position: 'absolute', left: '50%', bottom: 40, marginLeft: -40, justifyContent: 'center', alignItems: 'center'}}>
						<Image 
			            	style={{width: 42, height: 35, marginBottom: 5}}
			            	// resizeMode='contain'
			            	source={require('../images/weLogin.png')}
			            />
			            <Text style={{fontSize: 12, color: '#000000', textAlign: 'center'}}>微信快捷登录</Text>
		            </View>
	            </TouchableWithoutFeedback>

	            <View style={{width: 80,position: 'absolute', left: '50%', bottom: 150, marginLeft: -40, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
					<View style={{width: 15, height: 1, backgroundColor: '#9b9b9b'}}></View>
					<Text style={{fontSize: 12, color: '#9b9b9b', marginLeft: 5, marginRight: 5}} includeFontPadding={false}>or</Text>
					<View style={{width: 15, height: 1, backgroundColor: '#9b9b9b'}}></View>
	            </View>
        	</View>
        );
    }
}
const styles = StyleSheet.create({
    codeBox: {
    	fontSize: 14, 
    	color: '#0000ff', 
    	textAlign: 'right'
    }
});